<template>
  <div class="w-full h-full">
    <mapBase2D :isMake="activeTab === 1"></mapBase2D>
    <div class="rightPlane" :style="{
      height: activeTab == 0 ? '95%' : 'calc(100% - 90px)',
    }">
      <div class="rightPlane-header">
        <div class="rightPlane-title">
          <SvgIcon name="wmc-plane" width="28" height="28" color="#437EF1"></SvgIcon>
          <span>无人机架次</span>
        </div>
        <div class="rightPlane-tabs">
          <div 
            class="tab-item" 
            :class="{ active: activeTab === 0 }" 
            @click="changeTab(0)"
          >
            <i class="el-icon-video-play"></i>
            实时轨迹
          </div>
          <div 
            class="tab-item" 
            :class="{ active: activeTab === 1 }" 
            @click="changeTab(1)"
          >
            <i class="el-icon-video-camera"></i>
            轨迹回放
          </div>
        </div>
      </div>
      
      <div class="rightPlane-content">
        <RealTime 
          ref="realTimeRef" 
          v-show="activeTab === 0" 
        />
        <Playback 
          ref="playbackRef" 
          v-show="activeTab === 1" 
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
// import { MapManager } from "@/components/cme-base2D/core/MapManager.ts"
import Playback from './comp/playback.vue'
import RealTime from './comp/realTime.vue'

// const olService = MapManager.getInstance()
const realTimeRef = ref(null)
const playbackRef = ref(null)
const activeTab = ref(0)

const changeTab = (value) => {
  activeTab.value = value
  if (value === 0) {
    playbackRef.value?.clearPlaybackAll()
    realTimeRef.value?.getTodaysFlights()
  } else {
    playbackRef.value?.getTodaysFlights()
    realTimeRef.value?.clearRealTimeAll()
  }
}
</script>

<style lang="scss" scoped>
.rightPlane {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 360px;
  background: rgba(255, 255, 255, 0.85);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.08) 100%);
    pointer-events: none;
  }

  &-header {
    padding: 12px 16px 10px;
    background: rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid rgba(67, 126, 241, 0.15);
    position: relative;
  }

  &-title {
    display: flex;
    align-items: center;
    margin: 10px 0;
    
    span {
      margin-left: 8px;
      font-size: 16px;
      font-weight: 600;
      color: #1a1a1a;
      letter-spacing: 0.3px;
    }
  }

  &-tabs {
    display: flex;
    gap: 8px;

    .tab-item {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      padding: 8px;
      color: #666;
      background: rgba(245, 247, 250, 0.8);
      border-radius: 6px;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      font-size: 13px;
      cursor: pointer;
      user-select: none;
      position: relative;
      overflow: hidden;

      i {
        font-size: 15px;
        transition: transform 0.3s ease;
      }

      &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.1), transparent);
        transform: translateX(-100%);
        transition: transform 0.6s;
      }

      &:hover {
        background: rgba(238, 242, 255, 0.9);
        color: #437EF1;

        i {
          transform: scale(1.1);
        }

        &::before {
          transform: translateX(100%);
        }
      }

      &.active {
        background: #437EF1;
        color: white;
        font-weight: 500;
        box-shadow: 0 6px 16px rgba(67, 126, 241, 0.25);

        &::before {
          background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.2), transparent);
        }

        i {
          transform: scale(1.1);
        }
      }
    }
  }

  &-content {
    flex: 1;
    overflow: hidden;
    padding: 2px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.85) 100%);
  }
}

// 添加全局背景样式
.w-full.h-full {
  position: relative;
  background: linear-gradient(135deg, #f5f7fa 0%, #e4e7eb 100%);
}

// 优化滚动条样式
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(144, 147, 153, 0.3);
  border-radius: 3px;
  transition: all 0.3s ease;

  &:hover {
    background: rgba(144, 147, 153, 0.5);
  }
}
</style>